<template>
	<div class="ol-popup" ref="container">
		<div class="title">
			事件详情信息
			<a
				href="javascript:void(0)"
				@click="closePopup"
				class="ol-popup-closer"
			></a>
		</div>
		<div class="content">
			<table>
				<tr>
					<th>事件等级</th>
					<td>{{ accidentLevel[content.事件等级] }}</td>
				</tr>
				<tr>
					<th>发生时间</th>
					<td>{{ content.发生时间 }}</td>
				</tr>
				<tr>
					<th>发生地点</th>
					<td>{{ content.发生地点 }}</td>
				</tr>
				<tr>
					<th>处理状态</th>
					<td>{{ handleStatus[content.处理状态] }}</td>
				</tr>
				<!-- 以下两列需要判断pinia内数据,限制普通用户查看 -->
				<tr v-if="userData.type !== 'common'">
					<th>车牌号</th>
					<td>{{ content.车牌号 }}</td>
				</tr>
				<tr v-if="userData.type !== 'common'">
					<th>用户名</th>
					<td>{{ content.驾驶员 }}</td>
				</tr>
			</table>
		</div>
	</div>
</template>

<script setup>
import { onMounted, getCurrentInstance, ref, defineProps } from 'vue'
import { useUserDataStore } from '@/stores/user'
import{createPopup}from'@/api/ol-api/popup'
import { storeToRefs } from 'pinia'
const userDataStore = useUserDataStore()
const { userData } = storeToRefs(userDataStore)
const container = ref('');
const content = ref({})
// 获取数据做一个映射

const accidentLevel = {
	1: '严重事故',
	2: '中等事故',
	3: '轻度事故',
	4: '轻微事故',
}
const handleStatus = {
	0: '待处理',
	1: '正在处理',
	2: '已处理',
}
const props = defineProps({
	layer_icon: {
		type: Object,
	},
})
const { proxy } = getCurrentInstance()
let popup = null
let map
onMounted(() => {
	map = proxy.$map
	//遮罩层
	popup = createPopup({
		container: container.value,
		map,
	})
    //给地图绑定事件
    map.on('pointermove',function(e){
        var pixel = map.getEventPixel(e.originalEvent);
        var hit = map.hasFeatureAtPixel(pixel);
        map.getTargetElement().style.cursor = hit?'pointer':'';
    })
    //点击地图,存在要素就返回
    map.on('click',(e)=>{
        //获取当前点击是否存在要素,并返回
        const feature = map.forEachFeatureAtPixel(e.pixel,function(feature,layer){
            //判断一下传过来的是否是标注图层,防止发布公告时,点到标注图层出发弹窗
            if(layer ===props.layer_icon){
                return feature
            }
        })
        //如果存在要素就显示弹窗
        if(feature){
            //让弹窗显示
            let center = e.coordinate;
            content.value = feature.values_.values_;
            popup.setPosition(center)
        }

    })
})
//关闭弹窗
const closePopup = () => {
	popup.setPosition(null)
}
//暴露给父组件调用
defineExpose({ closePopup })
</script>

<style lang="scss" scoped>
.ol-popup {
	width: 270px;
	padding-bottom: 20px;
	box-sizing: border-box;
	position: absolute;
	background-color: white;
	-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
	border-radius: 10px;
	border: 1px solid #cccccc;
	bottom: 22px;
	left: 50%;
	transform: translateX(-50%);
	min-width: 100px;
	z-index: 100;
	border-radius: 10px;
}

.ol-popup:after,
.ol-popup:before {
	top: 100%;
	border: solid transparent;
	content: ' ';
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.ol-popup:after {
	border-top-color: white;
	border-width: 10px;
	left: 50%;
	transform: translateX(-50%);
}

.ol-popup:before {
	border-top-color: #cccccc;
	border-width: 11px;
	left: 50%;
	transform: translateX(-50%);
}

.ol-popup-closer {
	text-decoration: none;
	position: absolute;
	top: 2px;
	right: 8px;
}

.ol-popup-closer:after {
	content: '✖';
}
.title {
	background: #4a90e2;
	color: white;
	padding: 2px 5px;
}
.content {
	margin-top: 20px;
	padding: 0 15px;
}
.ol-popup table {
	border-collapse: collapse;
	margin: 0;
}
.ol-popup table,
th,
td {
	border: 1px solid #ccc;
}
.ol-popup th {
	padding: 2px 10px;
}
.ol-popup td {
	padding: 2px 5px;
	width: 150px;
}
</style>
